<template>
  <div>
    <div style="float: left;padding-top: 5px;">{{f_value_name}}</div>
    <van-button v-if="!disabled" style="margin-left: 20px;" size="small" type="info" native-type='button'
                @click="showEdit=true">选择</van-button>
    <van-popup v-model="showEdit" position="bottom" :style="{height:'90%'}" closeable >
      <div style="margin-top: 40px;" v-f="showEdit==true">
        <van-search v-model="s_str" placeholder="请输入搜索关键词" />
        <van-picker v-loading="loading" :columns="nameList"
                    @confirm="setValue" @cancel="showEdit=false"
                    title="选择" show-toolbar />
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading:false,
      showEdit:false,
      f_value_name:'',

      itemList:[],
      nameList:[],

      s_str:'',
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: { type: String, default: null },
    disabled:{ type: Boolean, default: false },
  },
  watch: {
    s_str: {
      handler(newval, oldval) {
        if (newval != null && newval!='' && newval!=oldval) {
          this.search();
        }
      },
      immediate: true
    },
  },
  created() {},
  mounted() {
    this.load();
  },
  methods: {
    async load(){
      this.loading = true;
      if(!this.em(this.value)){
        let cList = await elm.post('/business/my/GetEIData', {emp_code: this.value});
        if(cList.length==1){
          this.f_value_name = cList[0].name;
        }
      }
      this.loading = false;
    },
    async search(){
      this.loading = true;
      this.itemList = await elm.post('/business/my/GetEIData', {name: this.s_str});
      let nameList = [];
      for(let i=0;i<this.itemList.length;i++){nameList.push(this.itemList[i].name);}
      this.nameList = nameList;
      this.loading = false;
    },
    setValue:function(value, index){
      this.f_value_name = this.itemList[index].name;
      //this.$emit('update:value', this.itemList[index].id);
      this.$emit('change', this.itemList[index].id);
      this.showEdit = false;
    },

    em: function (s) {
      if (s == null || s == '') { return true; }
      else { return false; }
    },
  }
}
</script>